<template>
  <div style="width: 100%;">
    <avue-crud :option="{...option,selection:!disabled}"
               :table-loading="loading"
               :data="tableList"
               @selection-change="v=>selection=v"
               ref="crud">
      <template slot="menuLeft">
        <el-button size="small"
                   :disabled="disabled"
                   type="primary"
                   @click="addLine">
          添加行
        </el-button>
        <el-button size="small"
                   :disabled="disabled||selection.length===0"
                   type="danger"
                   @click="remove">
          移除
        </el-button>
      </template>

      <template slot="groupName" slot-scope="{row}">
        <el-select v-if="row.$cellEdit" size="small" v-model="row.groupName" filterable allowCreate>
          <template v-for="{name} in dicData">
            <el-option :value="name" :label="name">
              <span style="float: left">{{ name }}</span>
              <span style="float: right;line-height: 30.59px" class="el-icon-delete"
                    @click.prevent.stop="$emit('clickAfterIcon',name)"></span>
            </el-option>
          </template>
        </el-select>
        <span v-else>{{row.groupName}}</span>
      </template>

      <template slot="menu" slot-scope="{row}" v-if="showOperation">
        <el-button v-if="row.$cellEdit" type="text" :disabled="disabled" @click="rowSave(row)">
          保存
        </el-button>
        <el-button v-if="!row.$cellEdit" type="text" :disabled="disabled" @click="()=>editRow(row)">
          编辑
        </el-button>
      </template>
    </avue-crud>
  </div>
</template>

<script>
export default {
  name: "msEditTable",
  props: {
    tableList: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    column: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    dicData: {
      type: Array,
      required: true,
      default: () => {
        return []
      }
    },
    height: {
      type: String,
      default: () => {
        return "300px"
      }
    },
    disabled: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    operateTree: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    showOperation: {
      type: Boolean,
      default: () => {
        return true
      }
    },
    rowSaveBefore: Function
  },
  data() {
    return {
      loading: false,
      option: {
        rowKey:'oid',
        rowParentKey:'parentId',
        height: this.height,
        calcHeight: 30,
        dialogWidth: 900,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: false,
        selection: !this.disabled,
        labelWidth: 120,
        menuWidth: 90,
        viewBtn: false,
        dialogClickModal: false,
        tabs: true,
        delBtn: false,
        addBtn: false,
        editBtn: false,
        refreshBtn: false,
        columnBtn: false,
        align: "center",
        menu: !this.disabled,
        header: !this.disabled,
        column: this.column,
        defaultExpandAll:true,
      },
      selection: [],
    }
  },
  methods: {
    editRow(row){
      row.$cellEdit=!row.$cellEdit;
      this.$nextTick(() => {
        this.$refs.crud.refreshTable();
      });
    },
    addLine() {
      let data = this.deepCopy(this.tableList)
      let column = this.deepCopy(this.column);
      let obj = {};
      column.forEach(item => {
        obj[item.prop] = "";
        Object.assign(obj, {$cellEdit: true})
      })
      if(this.operateTree && this.selection.length === 1){
        obj.parentId = this.selection[0].oid
      }
      data.push(obj);
      this.$emit("update:tableList", data);
    },
    remove() {
      let data = JSON.parse(JSON.stringify(this.tableList));
      let dataCopy = JSON.parse(JSON.stringify(this.tableList));
      let index = this.selection.map(i => i.$index);
      dataCopy = [];

      data.forEach(i => {
        if (!index.includes(i.$index)) {
          dataCopy.push(i)
        }
      })
      this.$emit("update:tableList", dataCopy);
    },
    rowSave(row) {
      if (typeof this.rowSaveBefore === "function") {
        row.$cellEdit = this.rowSaveBefore(row);
      } else {
        row.$cellEdit = !row.$cellEdit;
      }
      this.$nextTick(() => {
        this.$refs.crud.refreshTable();
      });

    },
  },
  /* watch: {
     disabled: {
       handler(v) {
         this.option.menu = !v;
         this.option.header = !v;
         this.option.selection = !v;

         this.$nextTick(() => {
           this.$refs['crud'].refreshTable();
         })
       },
       immediate: true,
       deep: true
     }
   }*/
}
</script>

<style scoped>

</style>
